<template>
	<view>
		<view class="appoint-container">
			<view class="appoint_banner">
				<image src="../../static/icon/a.png" mode=""></image>
			</view>
			<view class="name">
				<text style="color: red;">*</text>
				<text class="info">预约人员:</text>
				<input type="text" placeholder="请输入预约人员姓名" v-model="params['联系人姓名']">
			</view>
			<view class="name">
				<text style="color: red;">*</text>
				<text class="info">手机号码:</text>
				<input type="number" placeholder="请输入手机号码" v-model="params['联系人电话']">
			</view>
			<view class="name">
				<text style="color: red;">*</text>
				<text class="info">上门地址:</text>
				<input type="text" placeholder="请输入上门地址" v-model="params['报事位置']">
			</view>
			<view class="name">
				<text style="color: red;">*</text>
				<text class="info">上门时间:</text>
				<my-picker ref="picker" :value="time" @input="pickerchange" />
			</view>
			<view class="name" style="margin-bottom: 20rpx;">
				<text style="color: red;">*</text>
				<text class="info">所属小区:</text>
				<text>{{userInfo.projName}}</text>
				<!-- <input type="number" v-model="phoneNumber" placeholder="请输入联系方式"> -->
			<!-- 	<view class="tap" @click="handleTap('picker')">{{label}}</view>
				<view class="arrow" @click="handleTap('picker')"></view> -->
			</view>
			<!-- <lb-picker ref="picker" @click="handleTap('picker')" v-model="value" mode="selector" :list="projectList" :dataset="{ name: 'label' }"
			 @change="handleChange" @confirm="handleConfirm" @cancel="handleCancel">
			</lb-picker> -->
			<uploader ref="uploader" @input='onchange' />
			<view class="name">
				<text class="info">备注留言:</text>
				<input type="text" style="color: #333;" v-model="params['报事描述']" placeholder="特殊要求，大型物品，无电梯等备注">
			</view>
			<view class="immediate" @click="handleSubmit">立即预约</view>
			<!-- 遮罩层 -->
			<!-- <view class="dialog" @click="closeDialog" v-show="visible"></view>
			<view class="toast" v-show="visible" @click='closeDialog'>
				<view class="icon">
					<image src="../static/icon/success.png"></image>
				</view>
				<view class="success">预约成功</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker/index.vue'
	import dyDatetimePicker from '@/components/lanxiujuan-dyDateTime/lanxiujuan-dyDateTime'
	// import { previewImg } from '@/utils/previewImg'
	import uploader from '@/myComponents/image-uploader.vue'
	import myPicker from '@/myComponents/time-picker.vue'
	export default {
		components: {
			LbPicker,
			dyDatetimePicker,
			uploader,
			myPicker
		},
		data() {
			const currentDate = this.getDate({
			   format: true
			})
			return {
				params: {
					来源:6,
					操作类型: 'submit',
					工单类型: 'B',
					联系人姓名: '',
					联系人电话: '',
					报事描述: '',
					报事位置: '',
					上门时间: '',
					所属项目id: null,
					报事附件: []
				},
				value: '',
				label: '',
				chooseImg: [],
				childValue: '',
				file: {
					fileData: null,
					fileName: null
				},
				time: '请选择上门时间',
				userInfo: {}
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.params.联系人姓名 = this.userInfo.name
			this.params.所属项目id = this.userInfo.projId
			this.params.联系人电话 = this.userInfo.mobile
			// this.projName = this.userInfo.projName
		},
		methods: {
			pickerchange(e){
				this.time = e
				this.params.上门时间 = e
				console.log('pickerchangeid',e);
			},
			onchange(e) {
				this.params.报事附件 = e
				// console.log(e)
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			handleCancel(e) {
				uni.showTabBar({
					animation: true
				})
				console.log('cancel::', e)
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			handleChange(e) {
				console.log('change::', e)
			},
			handleConfirm(e) {
				// 如果存在多个picker，可以在picker上设置dataset属性，confirm中获取，就能区分是哪个picker了
				console.log('confirm::', e)
				if (e) {
					const name = e.dataset.name
					// this.params.所属项目id = e.item.id
					this.params.所属项目id = e.item.id
					// this.params2.所属项目id = e.item.id
					const label = e.item.label
					if (name && label) {
						this[name] = label
					}
				}
			},
			handleSubmit() {
				if(this.params.联系人姓名.trim() == ''){
					uni.showToast({
						title: '请填写业主姓名',
						icon: 'none'
					})
				}else if(this.params.联系人电话.trim() == ''){
					uni.showToast({
						title: '请填写联系电话',
						icon: 'none'
					})
				}else if(/^1[3456789]\d{9}$/.test(this.params.联系人电话) === false){
					uni.showToast({
						title: '请填写正确的手机号码',
						icon: 'none'
					})
				}else if(this.params.报事位置.trim() == ''){
					uni.showToast({
						title: '请填写上门地址',
						icon: 'none'
					})
				}else if(this.params.上门时间 == ''){
					uni.showToast({
						title: '请选择上门时间',
						icon: 'none'
					})
				}else {
					this.createTicket()
				}
			},
			createTicket() {
				uni.showLoading({
					title: '提交中',
					mask: true
				})
				this.$http2.post('ticketSystem/ticket/submit', this.params).then(res => {
					console.log(res)
					if (res.code === 10000) {
						uni.redirectTo({
							url: '../success/success?path=../index/index' + '&title=返回报事页面'
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.appoint-container {
		padding-bottom: 45rpx;

		.appoint_banner {
			width: 750rpx;
			height: 296rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.name {
			display: flex;
			position: relative;
			// margin: 0 20rpx;
			padding-left: 20rpx;
			width: 750rpx;
			height: 86rpx;
			align-items: center;
			border-bottom: 2rpx solid #F5F5F5;

			// box-shadow: 0px 1px 0px 0px rgba(237, 237, 237, 1);
			text {
				margin-right: 8rpx;
				color: #333333;
				font-size: 30rpx;
			}

			input {
				color: #666;
				font-size: 32rpx;
				width: 546rpx;
			}

			.info {
				// width: 160rpx;
				margin-right: 33rpx;
				color: #333;
			}

			.arrow {
				position: absolute;
				top: 28rpx;
				right: 36rpx;
				transform: rotate(45deg);
				width: 24rpx;
				height: 24rpx;
				color: #9F9F9F;
				border-top: 2rpx solid rgba(159, 159, 159, 1);
				border-right: 2rpx solid rgba(159, 159, 159, 1);
			}

			.tap {
				width: 500rpx;
				height: 86rpx;
				line-height: 86rpx;
			}
		}

		.upload {
			width: 750rpx;
			height: 221rpx;
			display: flex;
			padding-top: 20rpx;
			padding-left: 20rpx;

			.left {
				color: #333;
				font-size: 32rpx;
				width: 120rpx;
				height: 27rpx;
				margin-right: 8rpx;
			}

			.up_img {
				width: 587rpx;
				height: 268rpx;
				margin-left: 20rpx;
				display: flex;

				.add {
					width: 164rpx;
					height: 164rpx;
					margin-right: 20rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.add_img {
					width: 164rpx;
					height: 164rpx;
					border: 1rpx solid #999999;
					margin-right: 40rpx;
					position: relative;

					image {
						width: 100%;
						height: 100%;
					}

					.clear {
						width: 40rpx;
						height: 40rpx;
						background-color: #000;
						opacity: 0.5;
						color: #BFBFBF;
						position: absolute;
						top: 0;
						right: 0;
						font-size: 32rpx;
						text-align: center;
						line-height: 40rpx;
					}
				}
			}
		}

		.immediate {
			margin: 86rpx 0 0 84rpx;
			width: 578rpx;
			height: 72rpx;
			background-color: #1064E9;
			border-radius: 8rpx;
			font-size: 32rpx;
			color: #fff;
			text-align: center;
			line-height: 72rpx;
		}

		.dialog {
			width: 100%;
			height: 100%;
			background-color: #000;
			opacity: 0.4;
			position: absolute;
			left: 0;
			top: 0;
		}

		.toast {
			width: 476rpx;
			height: 310rpx;
			border-radius: 20rpx;
			position: absolute;
			z-index: 99;
			left: 130rpx;
			top: 425rpx;
			color: #333;
			background-color: #fff;

			.icon {
				width: 82rpx;
				height: 82rpx;
				position: absolute;
				left: 197rpx;
				top: 61rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.success {
				font-size: 30rpx;
				position: absolute;
				left: 180rpx;
				top: 170rpx;
			}
		}
	}
</style>
